<template>
  <div class="home">
    <a-image data-v-9ea40744 :width="200" :style="{ display: 'none' }" :preview="{
      visible,
      onVisibleChange: setVisible,
    }" src="https://img.cdn.tencent-qq.cn/Yize/2023/05/2dd70a1d71a3ccb0.png" />
    <div class="one">
      <div class="text">
        <div class="title-line-wrapper">
          <div class="title-line"></div>
        </div>
        <h1>蛋白后宫制图团</h1>
        <h2>主播蛋白地图团队</h2>
        <div class="button-nav">
          <a-button type="primary" @click="tolinks(1)" class="button" ghost>后宫文档</a-button>
          <a-tooltip placement="bottom">
            <template #title>
              <img v-lazy="'https://img.cdn.tencent-qq.cn/Yize/2023/05/a1afc43d51379c96.jpg'" width="150" height="150" />
            </template>
            <a-button type="primary" @click="tolinks(3)" class="button" ghost>公众号</a-button>
          </a-tooltip>
        </div>
      </div>
      <div class="bg">
        <a-image class="img" src="https://img.cdn.tencent-qq.cn/Yize/2023/05/ea34236125d9bed1.png"
          fallback="" />
      </div>
    </div>
    <div class="two">
      <h1>蛋白直播间</h1>
      <p>（每秒自动检测一次，注意此过程会消耗流量）</p>
      <ul>
        <li>
          <span class="title">状态</span>
          <span class="icon" :class="play_class()"><play-circle-filled /></span>
          <span class="text">{{ play_text() }}</span>
        </li>
        <li>
          <span class="title">标题</span>
          <span class="icon"><notification-filled /></span>
          <span class="text">{{ play_name }}</span>
        </li>
        <li>
          <span class="title">通知</span>
          <span class="icon"><notification-filled /></span>
          <span class="text_notice">{{ play_notice }}</span>
        </li>
      </ul>
    </div>
    <div class="friendly-links">
      <h1>蛋白账号大全</h1>
      <p>（点击查看前往）</p>
      <ul v-if="danbai_account != null">
        <li v-for="i in danbai_account">
          <a :href="i.url" target="_blank" class="link">
            <span class="icon">
              <icon>
                <template #component>
                  <img :src="i.icon" alt="" style="width: 80px;">
                </template>
              </icon>
            </span>
            <span class="text">{{ i.name }}</span>
          </a>
        </li>
      </ul>
      <ul v-else>
        <h1>读取数据失败</h1>
      </ul>
    </div>
    <div class="member">
      <h1>后宫成员</h1>
      <p>（点击查看详情）</p>
      <div class="main">
        <div class="loading" v-if="member == null">
          <loading-outlined />
        </div>
        <div class="loaded" v-else>
          <div class="li" v-for="memberdata in member" :key="memberdata.bid" :bid="memberdata.bid"
            @click="toMemberInfo(memberdata.bid, memberdata.member_name)">
            <img :src="'https://q.qlogo.cn/g?b=qq&nk=' + memberdata.member_qq + '&s=640'" class="img-fluid" alt="">
            <h2 class="member-name" style="font-size: 13pt;">{{ memberdata.member_name }}</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Icon, { ClockCircleFilled, PlayCircleFilled, NotificationFilled, WeiboCircleFilled, LoadingOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import Api from '@/api/api';
const axios = require('axios');
var FormData = require('form-data');

export default {
  data() {
    return {
      visible: false,
      play_name: 'Name',
      play_notice: 'Notice',
      play: false,
      live: 0,
      liveTimer: null,
      member: null,
      danbai_account: null
    }
  },
  components: {
    Icon,
    ClockCircleFilled,
    PlayCircleFilled,
    NotificationFilled,
    WeiboCircleFilled,
    LoadingOutlined
  },
  methods: {
    play_class() {
      if (this.play) {
        return "play"
      } else {
        return "noplay"
      }
    },
    play_text() {
      if (this.play) {
        return "已开播"
      } else {
        return "未开播"
      }
    },
    toMemberInfo(bid) {
      this.$router.push("/member/" + bid)
    },
    setVisible(visible) {
      this.visible = visible
    },
    Notification_s() {
      if ('Notification' in window) {
        if (Notification.permission !== 'granted') {
          Notification.requestPermission().then(permission => {
            if (permission === 'granted') {
              // 用户授权
              const notification = new Notification('开播提醒!', {
                icon: 'https://img.cdn.tencent-qq.cn/Yize/2023/05/6d19ed0008bb7ad9.png',
                body: '开播了！锁定762505！'
              })
              notification.onclick = function () {
                window.open("https://douyu.com/762505")
              };
            }
          })
        } else {
          // 用户已经同意了通知权限
          const notification = new Notification('开播提醒!', {
            icon: 'https://img.cdn.tencent-qq.cn/Yize/2023/05/6d19ed0008bb7ad9.png',
            body: '开播了！锁定762505！'
          })
          notification.onclick = function () {
            window.open("https://douyu.com/762505")
          };
        }
      } else {
        message.error("Notification")
      }
    },
    tolinks(id) {
      var ua = navigator.userAgent.toLowerCase();
      if (id == 1) {
        window.open("https://docs.dbhg.top")
      } else if (id == 2) {
        window.open("https://hgcy.dbhg.top")
      } else if (id == 3) {
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          location.href = "https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkwNjIwNjY0OA==#wechat_redirect"
        } else {
          this.visible = true
        }
      }
    },
    livemessage(type, contents) {
      if (type == "success") {
        var config = {
          content: contents,
          key: "live",
        }
        message.success(config)
      }
      if (type == "loading") {
        var config = {
          content: contents,
          key: "live",
        }
        message.loading(config)
      }
      if (type == "info") {
        var config = {
          content: contents,
          key: "live",
        }
        message.info(config)
      }
      if (type == "error") {
        var config = {
          content: contents,
          key: "live",
        }
        message.error(config)
      }
    },
    getLiveState() {
      var data = new FormData();
      data.append('apikey', Api.apikey);

      var config = {
        method: 'post',
        url: Api.url + '/live/live-state',
        data: data
      };

      var that = this
      axios(config)
        .then(function (response) {
          if (response) {
            if (response.data) {
              that.play_name = response.data.notice
              if (response.data.code == 200 & that.live == 0) {
                that.play = true
                that.livemessage("success", "开播啦！")
                that.Notification_s()
                that.live = 1
              }
              if (response.data.code == 201 & that.live == 1) {
                that.play = false
                that.live = 0
              }
            }
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getnotice() {
      var data = new FormData();
      data.append('apikey', Api.apikey);

      var config = {
        method: 'post',
        url: Api.url + '/dbhg/config',
        data: data
      };
      var that = this
      axios(config)
        .then(function (response) {
          if (response) {
            if (response.data) {
              if (response.data.code == 200) {
                that.play_notice = response.data.data.notice
              }
            }
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getmember() {
      var data = new FormData();
      data.append('apikey', Api.apikey);

      var config = {
        method: 'post',
        url: Api.url + '/dbhg/member',
        data: data
      };

      var that = this
      axios(config)
        .then(function (response) {
          if (response) {
            if (response.data) {
              if (response.data.code == 200) {
                that.member = response.data.data
              }
            }
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getaccount() {
      var config = {
        method: 'get',
        url: '/account.json',
      };

      var that = this
      axios(config)
        .then(function (response) {
          if (response) {
            if (response.data) {
              that.danbai_account = response.data
            }
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  },
  mounted() {
    this.getaccount()
    this.getmember()
    this.getLiveState()
    this.getnotice()
    var that = this
    this.liveTimer = setInterval(function () { that.getLiveState(), that.getnotice() }, 1000);
  }
}

</script>
<style scoped lang="scss">
a {
  :hover {
    color: #409EFF;
  }

  color: #000;
}

// 线条动画

.title-line-wrapper {

  .title-line {
    height: 100%;
    width: auto;
    -webkit-animation: bannerTitleLine 3s ease-in-out 0s infinite;
    animation: bannerTitleLine 3s ease-in-out 0s infinite;
    background: -webkit-linear-gradient(left, rgba(24, 144, 255, 0), #E6A23C);
    background: linear-gradient(90deg, rgba(24, 144, 255, 0) 0, #ebb563);
  }

  height: 4px;
  border-radius: 12px;
  width: auto;
  overflow: hidden;
}


@keyframes bannerTitleLine {

  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }


  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
  }
}

.home {
  .one {
    margin-top: 100px;
    margin-bottom: 200px;

    .text {
      h1 {
        font-size: 4em;
        -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      }

      h2 {
        font-size: 2em;
        -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      }

      .button-nav {
        button {
          margin-right: 10px;
          line-height: 20px;
          font-size: 14pt;
          border-radius: 20px;
        }

        .ant-image {
          display: none;
        }

        margin-top: 10px;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
      }

      margin-top: 20px;
      margin-left: 50px;
      padding: 50px;
      display: flex;
      width: 100%;
      height: 100%;
      text-decoration: none;
      flex-direction: column;
    }

    display: flex;
    width: 100%;
    height: 100%;
  }

  .two {
    h1 {
      -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      text-align: center;
      font-size: 3em;
    }

    p {
      -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    ul {
      -webkit-animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
      animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: row;
      justify-content: space-around;
    }

    li {
      .title {
        padding: 10px;
      }

      .icon {
        display: flex;
        width: 100px;
        height: 100px;
        padding: 2rem;
        border-radius: 50% !important;
        font-size: 4em;
        color: #000;
        border: 1px solid #000;
        text-align: center;
        align-items: center;
        justify-content: center;
      }

      .noplay {
        color: #F56C6C;
        border: 1px solid #F56C6C;
      }

      .play {
        color: #67C23A;
        border: 1px solid #67C23A;
        -webkit-animation: play 1.2s ease-in-out infinite both;
        animation: play 1.2s ease-in-out infinite both;
      }

      .text {
        display: flex;
        height: 100%;
        padding: 20px;
        text-align: center;
        text-decoration: none;
      }

      .text_notice {
        display: flex;
        width: 200px;
        height: 10%;
        padding: 20px;
        text-align: center;
        text-decoration: none;
        flex-direction: column;
      }

      display: flex;
      list-style-type: none;
      flex-direction: column;
      align-items: center;
      margin: 30px;
    }

    margin-top: 20px;
    margin-bottom: 100px;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
  }

  .friendly-links {
    h1 {
      -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      text-align: center;
      font-size: 3em;
    }

    ul {

      li {

        :hover {
          outline: 1px solid #409EFF;
        }

        .link {
          :hover {
            color: #000;
            outline: none;
          }

          .icon {
            display: flex;
            width: 100px;
            height: 100px;
            padding: 2rem;
            border-radius: 50%;
            font-size: 4em;
            color: #000;
            text-align: center;
            align-items: center;
            justify-content: center;
          }

          .text {
            display: flex;
            height: 100%;
            padding: 20px;
            text-align: center;
          }

          text-decoration: none;
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        display: flex;
        list-style-type: none;
        flex-direction: column;
        align-items: center;
      }

      -webkit-animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
      animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: row;
      align-items: center;
      justify-content: space-evenly;
      flex-wrap: wrap;
    }

    text-align: center;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
  }

  .member {
    h1 {
      -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      text-align: center;
      font-size: 3em;
    }

    p {
      -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    .main {
      .loading {
        font-size: 10rem;
      }

      .loaded {
        .li {
          .img-fluid {
            border-radius: 50%;
            width: 120px;
            height: auto;
            opacity: 0.5;
            padding-bottom: 8px;
            transition: border-radius 1.1s;
            -webkit-transition: border-radius 1.1s;
          }

          &:hover {
            .img-fluid {
              border-radius: 12px 12px 0 0;
              opacity: 1;
              cursor: pointer;
            }

            border-radius: 12px;
            box-shadow: 0 0 5px 0 rgba($color: #000000, $alpha: 0.5);
          }

          margin: 10px;
          box-shadow: none;
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
      }

      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: row;
      align-items: center;
      justify-content: space-evenly;
      flex-wrap: wrap;
    }

    margin-top: 100px;
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  margin-top: 100px;
  margin-bottom: 100px;
}

@media screen and (max-width: 800px) {
  .home {
    .one {
      .text {
        h1 {
          text-align: center;
          font-size: 2.5em;
          -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }

        h2 {
          text-align: center;
          font-size: 1.5em;
          -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }

        .button-nav {
          button {
            margin-right: 10px;
            line-height: 20px;
            font-size: 14pt;
            border-radius: 20px;
          }

          display: flex;
          flex-wrap: nowrap;
          flex-direction: row;
          justify-content: center;
        }

        margin-top: 0px;
        margin-left: 0px;
        padding: 50px;
        display: flex;
        width: 100%;
        height: 100%;
      }

      .bg {
        .img {
          border-radius: 12px;
          box-shadow: 0 0 5px 0 rgba($color: #000000, $alpha: 0.5);
          width: 90%;
          height: 90%;
          -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
          animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        }

        display: flex;
        flex-direction: row;
        justify-content: center;
      }

      margin-top: 30px;
      margin-bottom: 50px;
      display: flex;
      flex-direction: column-reverse;
      width: 100%;
      height: 100%;
    }

    .two {
      h1 {
        -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        text-align: center;
        font-size: 2em;
      }

      ul {
        -webkit-animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: space-around;
      }

      li {
        .icon {
          display: flex;
          width: 100px;
          height: 100px;
          padding: 2rem;
          border-radius: 50%;
          font-size: 4em;
          color: #000;
          border: 1px solid #000;
          text-align: center;
          align-items: center;
          justify-content: center;
        }

        .noplay {
          color: #F56C6C;
          border: 1px solid #F56C6C;
        }

        .play {
          color: #67C23A;
          border: 1px solid #67C23A;
          -webkit-animation: play 1.2s ease-in-out infinite both;
          animation: play 1.2s ease-in-out infinite both;
        }

        .text {
          display: flex;
          height: 100%;
          padding: 20px;
          text-align: center;
        }

        display: flex;
        list-style-type: none;
        flex-direction: column;
        align-items: center;
        margin: 50px;
      }

      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: column;
      align-items: center;
    }

    .friendly-links {
      h1 {
        -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        text-align: center;
        font-size: 3em;
      }

      ul {
        -webkit-animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
      }

      li {
        .link {
          .icon {
            :hover {
              color: #000;
            }

            display: flex;
            width: 100px;
            height: 100px;
            padding: 2rem;
            border-radius: 50%;
            font-size: 4em;
            color: #000;
            text-align: center;
            align-items: center;
            justify-content: center;
          }

          .text {
            display: flex;
            height: 100%;
            padding: 20px;
            text-align: center;
          }

          display: flex;
          flex-direction: column;
          align-items: center;
        }

        display: flex;
        list-style-type: none;
        flex-direction: column;
        align-items: center;
      }

      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: column;
    }

    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    margin-top: 100px;
    margin-bottom: 100px;
  }
}
</style>
